{extend name="common/layout" /}
{block name="main"}
<div class="el-breadcrumb">
  <el-breadcrumb separator-class="el-icon-arrow-right">
    <el-breadcrumb-item>我的账本</el-breadcrumb-item>
    <el-breadcrumb-item>其他报表</el-breadcrumb-item>
  </el-breadcrumb>
</div>

<el-button type="primary" @click="handleAdd" icon="el-icon-plus">添加</el-button>
<div style="margin-top: 15px;">
  <el-table :data="tableData" stripe border style="width: 100%">
    <el-table-column prop="property_name" label="房产">
    </el-table-column>
    <el-table-column prop="number_name" label="房号">
    </el-table-column>
    <el-table-column prop="type_name" label="类型">
    </el-table-column>
    <el-table-column prop="total_money" label="金额">
    </el-table-column>
    <el-table-column prop="accounting_date" label="时间">
    </el-table-column>
    <el-table-column label="操作" key="slot" width="280">
      <template #default="scope">
        <el-button size="mini" v-if="scope.row.accout_mark=='N'" type="info" @click="handleEdit(scope.row)"
          icon="el-icon-edit">编辑</el-button>
        <el-button size="mini" v-if="scope.row.accout_mark=='N'" type="warning" @click="handleAccount(scope.row)"
          icon="el-icon-check">到账</el-button>
        <el-button size="mini" v-if="scope.row.accout_mark=='N'" type="danger" @click="handleDelete(scope.row)"
          icon="el-icon-delete">删除</el-button>
      </template>
    </el-table-column>
  </el-table>
  <div style="margin-top: 15px;">
    <el-pagination background layout="total, prev, pager, next" :total="pageTotal" v-model::current-page="currentPage"
      @current-change="changeTable">
    </el-pagination>
  </div>
</div>

<el-dialog :title="masterTitle" v-model="dialogFormVisible">
  <el-form :model="formData" :rules="rules" ref="formData">
    <el-form-item label="房号" :label-width="formLabelWidth" prop="house_number_id">
      <el-select v-model="formData.house_number_id" placeholder="请选择">
        <template v-for="item in numberData" :key="item.id">
          <el-option :label="item.name" :value="item.id">
          </el-option>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="类型" :label-width="formLabelWidth" prop="type">
      <el-select v-model="formData.type" placeholder="请选择">
        <template v-for="item in typeData" :key="item.id">
          <el-option :label="item.name" :value="item.id">
          </el-option>
        </template>
      </el-select>
    </el-form-item>
    <el-form-item label="金额" :label-width="formLabelWidth" prop="total_money">
      <el-input v-model="formData.total_money" autocomplete="off"></el-input>
    </el-form-item>
    <el-form-item label="日期" :label-width="formLabelWidth" prop="accounting_date">
      <el-date-picker type="date" v-model="formData.accounting_date" value-format="YYYY-MM-DD" placeholder="选择日期"
        style="width: 100%;">
      </el-date-picker>
    </el-form-item>
    <el-form-item label="是否重复" :label-width="formLabelWidth" prop="circulate_mark">
      <el-select v-model="formData.circulate_mark" placeholder="请选择">
        <el-option label="是" value="Y"></el-option>
        <el-option label="否" value="N"></el-option>
      </el-select>
    </el-form-item>
    <el-form-item label="备注" :label-width="formLabelWidth" prop="note">
      <el-input v-model="formData.note" autocomplete="off"></el-input>
    </el-form-item>
  </el-form>
  <template #footer>
    <span class="dialog-footer">
      <el-button @click="dialogFormVisible = false">取 消</el-button>
      <el-button type="primary" @click="handleSave()">确 定</el-button>
    </span>
  </template>
</el-dialog>
{/block}

{block name="script"}
<script>
  const data = {
    tableData: [],
    dialogFormVisible: false,
    formLabelWidth: '120px',
    formData: {},
    rules: {
      house_number_id: [{ required: true, message: '请选择', trigger: 'change' }],
      type: [{ required: true, message: '请选择', trigger: 'change' }],
      total_money: [{ required: true, message: '请输入', trigger: 'blur' }],
      accounting_date: [{ required: true, message: '请选择', trigger: 'change' }],
    },
    masterTitle: '',
    // 分页
    pageTotal: 0,
    currentPage: 1,
    numberData: [],
    typeData: [
      { id: 'D', name: '维修费' },
      { id: 'E', name: '工资' },
      { id: 'F', name: '其他' },
    ],
  };
  function f() {
    return {
      init: function () {
        this.queryTable();
        let that = this
        axiosGet("{:url('house.number/queryNumberId')}").then(response => {
          if (response.code == 1) {
            that.numberData = response.data;
            that.numberData.push({ id: 0, name: '整栋' })
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
      },
      queryTable: function (params) {
        let that = this;
        axiosGet("{:url('query')}", params).then(response => {
          if (response.code == 1) {
            that.tableData = response.data;
            that.pageTotal = response.count;
          } else {
            that.$message.error('系统出错了!!!');
          }
        });
      },
      changeTable(val) {
        let params = {
          'house_property_id': this.houseDef,
          'meter_id': this.meter_id,
          'page': val,
        }
        this.queryTable(params);
        this.currentPage = val;
      },
      handleAdd() {
        this.masterTitle = '新增其他收支'
        this.dialogFormVisible = true;
        this.formData = { house_property_id: this.houseDef, house_number_id: 0, circulate_mark: 'N' };
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields();
        }
      },
      handleEdit(row) {
        this.masterTitle = '修改其他收支'
        this.dialogFormVisible = true;
        this.formData = JSON.parse(JSON.stringify(row));
        if (this.$refs['formData']) {
          this.$refs['formData'].resetFields();
        }
      },
      handleSave() {
        let that = this;
        let validation = false;
        this.$refs['formData'].validate((valid) => {
          if (valid) {
            validation = true;
          }
        });
        if (validation) {
          axiosPost("{:url('save')}", this.formData).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.dialogFormVisible = false
              that.init();
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }
      },
      handleDelete(row) {
        let that = this;
        this.$confirm('是否确认删除?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axiosPost("{:url('delete')}", row).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.init();
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }).catch(() => { });
      },
      handleAccount(row) {
        let that = this;
        this.$confirm('是否确认到账?', '提示', {
          confirmButtonText: '确定',
          cancelButtonText: '取消',
          type: 'warning'
        }).then(() => {
          axiosPost("{:url('account')}", row).then(response => {
            if (response.state == 'success') {
              that.$message.success(response.msg);
              that.init();
            } else {
              that.$message({
                message: response.msg, type: response.state
              });
            }
          });
        }).catch(() => { });
      },
    }
  }
</script>
{/block}